<template>
    <view class="page">
        <view class="top flex">
            <view class="top-item" v-for="(item, index) in list" :key="item.price">
                <view class="top-item-1">￥{{ item.price }}</view>
                {{ item.name }}
            </view>
        </view>
        <view class="input flex">
            <input type="number" placeholder="自定义金额">
            元
        </view>
        <view class="btn" @click="handleSub">立即充值</view>
        <view class="tip">
            我是您的专属顾问，
            如果您充值遇到问题，请联系我们
            <image :src="showImgApi + obj.customer_service_qr_code.values" mode="scaleToFill" />
            <view class="tip-number" @click="handleCall">{{ obj.service_phone.values }}</view>
        </view>
    </view>
</template>
<script>
import { appletSetting } from "@/utils/request.js";
export default {
    data() {
        return {
            showImgApi: this.$config.showImgApi,
            list: [{ name: '1000旺币', price: 100 }, { name: '2000旺币', price: 200 }, { name: '3000旺币', price: 300 }, { name: '5000旺币', price: 500 }, { name: '8000旺币', price: 800 }, { name: '10000旺币', price: 1000 }, { name: '100旺币', price: 10 }, { name: '200旺币', price: 20 }, { name: '500旺币', price: 50 }],
            obj: {}
        }
    },
    onLoad() {
        this.init()
    },
    methods: {
        async appletSetting(data) {
            return await appletSetting(data)
        },
        init() {
            appletSetting().then(res => {
                this.obj = res
            })
        },
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.obj.service_phone.values,
            });
        },
        handleSub() {
            uni.redirectTo({
                url: './rechargeSuccess'
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    background-color: #ffffff;

    .tip {
        width: 338rpx;
        text-align: center;
        font-size: 24rpx;
        margin: 120rpx auto 0;

        image {
            width: 215rpx;
            height: 215rpx;
            margin: 12rpx auto 0;
        }

        .tip-number {
            font-size: 28rpx;
            color: #FFB850;
        }
    }

    .input {
        width: 90%;
        margin: 0 auto;
        border-radius: 24rpx;
        border: 2rpx solid #D7D7D7;
        font-size: 26rpx;
        height: 80rpx;
        padding: 0 24rpx 0 12rpx;

        input {
            flex: 1;
            font-size: 26rpx;
            border: none;
        }
    }

    .top {
        width: 95%;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 30rpx auto 0;

        .top-item {
            width: 212rpx;
            height: 160rpx;
            border: 2rpx solid #D7D7D7;
            font-size: 26rpx;
            text-align: center;
            border-radius: 12rpx;
            margin-bottom: 12rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .top-item-1 {
                font-size: 24rpx;
                margin-bottom: 12rpx;
            }
        }
    }
}
</style>